<template>
  <div class="text-image" :style="containerStyle">
    <div class="text-content" :class="randomStyle">{{ displayText }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps<{
  text: string
  width?: string
  height?: string
  backgroundColor?: string
}>()

// 艺术字样式配置
const styleConfigs = [
  {
    name: 'style-1',
    color: '#1890ff',
    fontFamily: '"STKaiti", "楷体", "KaiTi", serif',
  },
  {
    name: 'style-2',
    color: '#f5222d',
    fontFamily: '"STXingkai", "行楷", "XingKai", serif',
  },
  {
    name: 'style-3',
    color: '#52c41a',
    fontFamily: '"STSong", "宋体", "SimSun", serif',
  },
  {
    name: 'style-4',
    color: '#722ed1',
    fontFamily: '"STFangsong", "仿宋", "FangSong", serif',
  },
  {
    name: 'style-5',
    color: '#faad14',
    fontFamily: '"STHeiti", "黑体", "SimHei", sans-serif',
  }
]

// 获取显示的文字（最多4个字）
const displayText = computed(() => {
  return props.text?.slice(0, 4) || '文章'
})

// 随机选择样式
const selectedStyle = ref(styleConfigs[Math.floor(Math.random() * styleConfigs.length)])

// 容器样式
const containerStyle = computed(() => ({
  width: props.width || '100%',
  height: props.height || '100%',
  backgroundColor: props.backgroundColor || '#f0f2f5',
}))

// 随机样式类名
const randomStyle = computed(() => selectedStyle.value.name)
</script>

<style scoped lang="scss">
.text-image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;

  .text-content {
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    position: relative;

    &.style-1 {
      font-family: "STKaiti", "楷体", "KaiTi", serif;
      color: #1890ff;
      text-shadow: 3px 3px 0 #e6f7ff;
      letter-spacing: 8px;
    }

    &.style-2 {
      font-family: "STXingkai", "行楷", "XingKai", serif;
      color: #f5222d;
      transform: rotate(-5deg);
      text-shadow: 2px 2px 0 #fff1f0;
      font-size: 2.8em;
    }

    &.style-3 {
      font-family: "STSong", "宋体", "SimSun", serif;
      color: #52c41a;
      letter-spacing: 12px;
      text-shadow: 2px 2px 0 #f6ffed;
      border-bottom: 3px solid currentColor;
    }

    &.style-4 {
      font-family: "STFangsong", "仿宋", "FangSong", serif;
      color: #722ed1;
      transform: scale(1.1);
      text-shadow: 2px 2px 0 #f9f0ff;
      border: 2px solid currentColor;
      padding: 8px 16px;
    }

    &.style-5 {
      font-family: "STHeiti", "黑体", "SimHei", sans-serif;
      color: #faad14;
      letter-spacing: 4px;
      font-size: 2.8em;
      text-shadow: 2px 2px 0 #fffbe6;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 2px;
        background-color: currentColor;
      }
    }

    &:hover {
      transform: translateY(-2px);
      text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 